<template>
	<section class="aui-flexView">
		<header class="aui-navBar aui-navBar-fixed" v-if='false'>
			<a href="javascript:;" class="aui-navBar-item">
				<i class="icon icon-return"></i>
			</a>
			<div class="aui-center">
				<span class="aui-center-title">我的订单</span>
			</div>
			<a href="javascript:;" class="aui-navBar-item">
				<i class="icon icon-sys"></i>
			</a>
		</header>
		<section class="aui-scrollView">
			<div class="aui-tab" data-ydui-tab>
				<ul class="tab-nav" v-if='false'>
					<block v-for="(menuTab,index) in menuTabs" :key="index">
						<li v-bind:id="'tabNum'+index" @click="swichMenu(index)"
							:class="[currentTab==index ? 'tab-nav-item tab-active' : 'tab-nav-item']">
							{{menuTab.name}}
						</li>
					</block>
				</ul>
				<div class="divHeight"></div>
				<empty v-if='menuLists[0].length===0' />
				<div class="tab-panel">
					<block v-for="(menuList,index2) in menuLists" :key="index2">
						<div :class="[currentTab==index2 ? 'tab-panel-item tab-active' : 'tab-panel-item']">
							<block v-for="(menuList2,index3) in menuList" :key="index3">
								<div class="tab-item">
									<a href="javascript:void(0);" class="aui-well-item aui-well-item-clear"
										v-if='false'>
										<div class="aui-well-item-hd">
											<img :src="menuList2.logoimg" alt="">
										</div>
										<div class="aui-well-item-bd">
											<h3>{{menuList2.dname}}</h3>
										</div>
										<span class="aui-well-item-fr">{{menuList2.zt}}</span>
									</a>
									<div class="aui-mail-product">
										<a href="javascript:;" class="aui-mail-product-item">
											<div class="aui-mail-product-item-hd">
												<img :src="menuList2.img" alt="">
											</div>
											<div class="aui-mail-product-item-bd">
												<p>{{menuList2.name}}</p>
												<p>付款方式:{{paymentMethod[parseInt(menuList2.paymentMethod)]}}</p>
												<p>支付状态:{{paymentStatus[parseInt(menuList2.paymentStatus)]}}</p>
												<p>下单时间：{{menuList2.time}}</p>
												<p v-if="menuList2.refundStatus">退款状态：{{refundStatus[menuList2.refundStatus]}}</p>
											</div>
										</a>
									</div>
									<view class="row" style="padding: 15rpx 30rpx;align-items: center;justify-content: space-between;">
										<text >
											共{{menuList2.sum}}件商品 实付款: {{menuList2.paymentStatus=="2"||menuList2.paymentStatus=="4"?0:menuList2.pri}}
										</text>
										<view v-if="menuList2.paymentStatus==0&&!menuList2.refundStatus" @click="applicationForDrawback(menuList2)"  class="button">
											退款
										</view>
									</view>
									<div class="aui-mail-button" v-if='false'>
										<a href="javascript:;"
											:class="[menuList2.but_ddshouhuo==0 ? 'hd' : menuList2.but_ddshouhuo==2 ? '' :'aui-df-color']">等待收货</a>
										<a href="javascript:;"
											:class="[menuList2.but_wuliu==0 ? 'hd' : menuList2.but_wuliu==2 ? '' :'aui-df-color']">查看物流</a>
										<a href="javascript:;"
											:class="[menuList2.but_rebuy==0 ? 'hd' : menuList2.but_rebuy==2 ? '' :'aui-df-color']">再次购买</a>
										<a href="javascript:;"
											:class="[menuList2.but_pingjia==0 ? 'hd' : menuList2.but_pingjia==2 ? '' :'aui-df-color']">评价晒单</a>
										<a href="javascript:;"
											:class="[menuList2.but_fapiao==0 ? 'hd' : menuList2.but_fapiao==2 ? '' :'aui-df-color']">查看发票</a>
										<a href="javascript:;"
											:class="[menuList2.but_zhifu==0 ? 'hd' : menuList2.but_zhifu==2 ? '' :'aui-df-color']">去支付</a>
									</div>
								</div>
								<div :class="[index3+1==menuList.length ? 'hd':'divHeight']"></div>
							</block>
						</div>
					</block>
				</div>
			</div>
			<div class='loading'> {{loading?'正在加载中...':"~ 我是有底线的 ~"}}</div>
		</section>
	</section>
</template>

<script>
	import empty from '@/components/empty'
	import {paymentStatus,PaymentMethod,refundStatus} from "@/common/picker-data.js"
	export default {
		components: {
			empty
		},
		data() {
			return {
				loading: false,
				scrollLeft: 0,
				isClickChange: false,
				paymentStatus:paymentStatus,
				paymentMethod:PaymentMethod,
				refundStatus:refundStatus,
				currentTab: 0,
				menuTabs: [{
					name: '全部'
				}, {
					name: '待付款'
				}, {
					name: '待收货'
				}, {
					name: '已完成'
				}, {
					name: '已取消'
				}, ],
				param: {
					pageNum: 1
				},
				menuLists: [
					[]
				]
			}
		},
		created() {
			// for (var i = 0; i < this.menuLists.length; i++) {
			// 	this.getDateList(i);
			// }
		},
		onReachBottom() {
			this.getOrderList()
		},
		onShow() {
			this.menuLists[0] = []
			this.param.pageNum = 1
			this.getOrderList()
		},
		onPullDownRefresh() {
			this.param.pageNum = 1
			this.menuLists[0] = []
			this.getOrderList()
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			/* 申请退款 */
			applicationForDrawback(menuList2){
				console.log("订单信息",menuList2)
				this.$util.doPostJson(`/mallOrder/updateRefund`, {
					id:menuList2.id
				}, {}, true).then(res => {
					if (res.data.code == this.$ResponseStatus.OK) {
						menuList2.refundStatus = 1
						this.$forceUpdate()
						this.$util.showInfoToast("申请退款成功")
					}
				}).catch(error => {
					
					console.log(error)
				})
			},
			/**
			 * 请求订单
			 */
			async getOrderList() {
				this.loading = true
				try {
					const {
						data: resp
					} = await this.$util.getOrderList(this.param)

					const {
						data: {
							list,
							pageNum
						}
					} = resp

					if (list.length > 0 && pageNum === this.param.pageNum) {
						this.param.pageNum++
						list.forEach(it => {
							let productAttribute;
							try {
								productAttribute = JSON.parse(it.productAttribute)
							} catch (e) {
								console.warn(e, productAttribute)
							}

							this.menuLists[0].push({
								"id":it.id,
								"logoimg": `店铺LOGO`,
								"dname": `平台店铺名称`,
								"zt": "已完成",
								"img": it.productCover,
								"name": (productAttribute || {}).product_name || '无备注',
								"sum": it.quantity,
								"pri": it.orderAmount + "云豆",
								"but_rebuy": 2,
								"but_pingjia": 1,
								"but_fapiao": 1,
								"but_zhifu": 0,
								"but_wuliu": 0,
								"but_ddshouhuo": 0,
								"time": it.createTime || it.updateTime,
								"paymentMethod": it.paymentMethod,
								"paymentStatus": it.paymentStatus,
								"refundStatus":it.refundStatus,
							})
						})
					}
				} catch (e) {
					console.error(e)
				} finally {
					console.log('finally->get order')
					this.loading = false
				}
			},
			swichMenu: async function(current) { //点击其中一个选项
				if (this.currentTab == current) {
					return false;
				} else {
					this.currentTab = current;
					this.setScrollLeft(current);
				}
			},
			swiperChange: async function(e) {
				let index = e.target.current;
				this.setScrollLeft(index);
				this.currentTab = index;
			},
			setScrollLeft: async function(tabIndex) {
				let leftWidthSum = 0;
				for (var i = 0; i <= tabIndex; i++) {
					let nowElement = await this.getWidth('tabNum' + i);
					leftWidthSum = leftWidthSum + nowElement.width;
				}
				let winWidth = uni.getSystemInfoSync().windowWidth;
				this.scrollLeft = leftWidthSum > winWidth ? (leftWidthSum - winWidth) : 0
			},
			getWidth: function(id) { //得到元素的宽高
				return new Promise((res, rej) => {
					uni.createSelectorQuery().select("#" + id).fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						res(data);
					}).exec();
				})
			},
			getDateList: function(tabIndex) {
				// var entity = this.menuTabs[tabIndex].name;
				// this.menuLists[tabIndex].push(entity);
			},
		}
	}
</script>

<style scoped lang="scss">
	@import './style.css';

	.loading {
		text-align: center;
		margin: 30rpx 0;
		color: #999999;
	}
	
	.label-button{
		padding: 10rpx 20rpx;
	}
	
	.button{
		padding: 10rpx 30rpx;
		border-radius: 15rpx;
		color: #FFFFFF;
		background-color: #ff0000;
	}
</style>
